<template>
  <div class="containter">
    <div class="header">--- 培训记录详情 ---</div>
    <el-card id="mainCard" shadow="hover">
      <div slot="header">
        <span
          ><strong>培训记录详情 >> {{ record.subject }}</strong></span
        >
      </div>
      <div class="details">
        <div class="demo-image__lazy">
          <el-image
            class="el-image"
            v-for="url in recordImgs"
            :key="url"
            :src="url"
            :lazy="true"
            fit="fill"
          ></el-image>
        </div>
        <div class="infos">
          <div class="subject">
            {{ record.subject }}
            <hr />
          </div>
          <div class="baseinfo">
            <div class="row"><span>主讲人：</span> {{ record.lecturer }}</div>
            <div v-if="record.teacher != null" class="row">
              <span>指导教师：</span> {{ record.teacher }}
            </div>
            <div class="row">
              <span>培训时间：</span>
              {{ record.trainingDate | trainingDateFormatter() }}
            </div>
            <div class="row">
              <span>培训时长：</span> {{ record.duration + "分钟" }}
            </div>
            <div class="row">
              <span>培训地点：</span> {{ record.trainingLocation }}
            </div>
            <div class="row">
              <span>培训对象：</span>
              {{ record.grade + "级" + record.groupName + record.students }}
            </div>
            <div class="row"><span>培训内容：</span> {{ record.detail }}</div>
            <div
              v-if="record.remark != null && record.remark != ''"
              class="row"
            >
              <span>备注信息：</span> {{ record.remark }}
            </div>
            <hr />
            <div class="row base">
              <span>记录人：</span> {{ record.userVo.realName }}
            </div>
            <div class="row base">
              <span>记录时间：</span>
              {{ record.createDate | trainingDateFormatter() }}
            </div>
          </div>
        </div>
      </div>
      <div class="buttons">
        <el-button type="info" plain @click="returnClick">返回</el-button>
        <el-button v-if="!isGuest" type="primary" plain @click="exportRecord"
          >导出记录</el-button
        >
        <el-button v-if="!isGuest" type="danger" plain @click="removeRecordById(record.groupId)"
          >删除记录</el-button
        >
      </div>
      <!-- card body -->
    </el-card>
  </div>
</template>

<script>
import dateUtils from "../utils/date";
import Config from "../config.js";
export default {
  filters: {
    trainingDateFormatter(timestamp) {
      return dateUtils.timestampToDateWithoutSecond(timestamp);
    },
  },
  data() {
    return {
      recordId: this.$route.params.recordId,
      isGuest: true,
      record: {
        // subject: "关于String Boot的入门培训",
        // groupName: "JavaWeb后端组",
        // lecturer: "XXX",
        // teacher: "樊相奎",
        // trainingLocation: "西407",
        // trainingDate: "2020-01-01 08:00:00",
        // students: "全组成员",
        // duration: 120,
        // grade: 2020,
        // detail:
        //   // "教师借助合适的信息技术手段设计与优化讲解、启发、示范、指导、评价等课堂讲授活动，从而有助于知识和技能的形象化与直观化；通过多种方式建立知识之间的关联；有助于学生理解重点和关键问题；为学生参与知识理解和建构提供了丰富的学习支持；关注学生的不同需要；引发学生感知、记忆、想象、创造等思维活动 技术支持的课堂讲授下，信息技术有助于丰富讲授内容以及讲授形式，满足学生的不同认知风格和起点差异，继而破解学生理解和吸收学习内容中的重点和难点，同时有助于展开知识建构，引发高阶思维活动。 例如应用Inspiration概念",
        // remark: "",
        // imgs: [
        //   // "http://cselite.ker227.online/training_pic_20_d66dd84f3be246918ce1cfb2600ade8b",
        //   // "http://cselite.ker227.online/training_pic_22_a5e9e20157014615ac972b3ba39c544f",
        //   // "http://cselite.ker227.online/training_pic_19_f2be381c1f0246448876ae680dce5683",
        // ],
        userVo: {
          realName: "",
        },
      },
      recordImgs: [],
    };
  },

  created() {},

  mounted() {
    this.isGuest = window.sessionStorage.getItem("isGuest") == 1;
    // console.log("recordId", this.recordId);
    this.getSingleRecord();
  },

  methods: {
    async getSingleRecord() {
      const res = await this.$axios.get(
        `${this.HOST}/record/api/trainingRecordDetail/` + this.recordId
      );
      if (res.data.meta.code == 200) {
        this.record = res.data.data.record;
        this.record.images.forEach((url) => {
          this.recordImgs.push(Config.picPrefixUrl + url);
        });
        console.log("record", this.record);
      }
    },
    returnClick() {
      this.$router.go(-1);
    },
    removeRecordById(id) {
      console.log("confirm");
      this.$confirm("此操作将永久删除该条记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          // console.log("deleteid=", id);
          const res = await this.$axios.get(
            `${this.HOST}/record/api/deleteRecord/${id}`,
            {}
          );
          if (res.data.meta.code == 200) {
            this.$message({
              message: "删除成功",
              type: "error",
            });
          }
          this.getRecordList();
        })
        .catch(() => {});
    },
    async exportRecord() {
      const res = await this.$axios.get(
        `${this.HOST}/record/api/exportWordRecord/` + this.record.recordId,
        { responseType: "blob" }
      );
      let data = res.data;
      if (!data) {
        return;
      }
      let url = window.URL.createObjectURL(new Blob([data]));
      let a = document.createElement("a");
      a.style.display = "none";
      a.href = url;
      a.setAttribute(
        "download",
        this.record.groupName +
          "-" +
          this.record.subject +
          "（培训记录导出文件）.docx"
      );
      document.body.appendChild(a);
      a.click(); //执行下载
      window.URL.revokeObjectURL(a.href);
      document.body.removeChild(a);
    },
  },
};
</script>

<style lang="less" scoped>
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}

.containter {
  width: 75%;
  min-width: 1000px;
  margin: auto;

  .header {
    color: white;
    font-size: 28px;
    font-weight: bold;
    width: 100%;
    text-align: center;
    height: 50px;
  }

  #mainCard {
    background-color: rgba(255, 255, 255, 1);
    height: 80%;
    // min-height: 600px;

    .details {
      display: flex;

      .demo-image__lazy {
        box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.459);
        // border: 1px solid black;
        border-radius: 10px;
        overflow: scroll;
        max-height: 500px;
        height: 80%;
        min-width: 450px;
        width: 50%;

        .el-image {
          display: block;
          min-height: 200px;
          padding-bottom: 1px;
        }
      }
      .infos {
        padding-left: 30px;
        .subject {
          font-size: 20px;
          font-weight: bold;
        }

        .baseinfo {
          width: auto;

          .row {
            line-height: 22px;
            margin-bottom: 5px;

            span {
              font-weight: 550;
              color: rgba(0, 0, 0, 0.63);
            }
          }

          .base {
            font-size: 14px !important;
            color: gray;
          }
        }
      }
    }

    .buttons {
      margin-top: 30px;
      display: flex;
      justify-content: center;
    }
  }
}
</style>